<template>
  <div class="myprofile">
    <!-- 个人信息头部 -->
    <div class="Top">
      <!-- 用户名头像区域 -->
      <div class="userinfoHead">
        <div class="infobox">
          <h4>{{ userInfo.nickname }}</h4>
          <span>{{ userInfo.intro }}</span>
        </div>
        <div class="userImg">
          <img @click="editUserinfo" :src="userInfo.avatar" alt="" />
        </div>
      </div>
      <!-- 答题信息区域 -->
      <div class="topicDetail">
        <div class="item">
          <span>{{ userInfo.submitNum }}</span>
          <span>累计答题</span>
        </div>
        <div class="item">
          <span>{{
            this.userInfo.collectQuestions
              ? this.userInfo.collectQuestions.length
              : 0
          }}</span>
          <span>收藏题目</span>
        </div>
        <div class="item">
          <span>{{ userInfo.errorNum }}</span>
          <span>我的错题</span>
        </div>
        <div class="item">
          <span
            >{{
              parseInt((userInfo.errorNum / userInfo.submitNum) * 100)
            }}%</span
          >
          <span>正确率</span>
        </div>
      </div>
      <!-- 个人岗位区域 -->
      <div class="myJob">
        <van-cell
          class="job"
          title="我的岗位"
          is-link
          :value="userInfo.position"
          @click="$router.push('/editInfo?name=job')"
        >
          <template #icon>
            <i class="iconfont iconicon_mine_gangwei"></i>
          </template>
        </van-cell>
      </div>
    </div>
    <van-divider />
    <!-- 个人信息body -->
    <div class="mainbody">
      <!-- 面板数据 -->
      <div class="mainTop">
        <div class="mainTitle">面板数据</div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item
            class="
          readCount"
          >
            <div>
              昨日阅读
              <span
                >+{{
                  userInfo.shareData ? userInfo.shareData.read.yesterday : 0
                }}</span
              >
            </div>
            <div>
              {{ userInfo.shareData ? userInfo.shareData.read.total : 0 }}
            </div>
            <div>阅读总数</div>
          </van-grid-item>
          <van-grid-item
            class="
          readCount"
          >
            <div>
              昨日获赞
              <span
                >+{{
                  userInfo.shareData ? userInfo.shareData.star.yesterday : 0
                }}</span
              >
            </div>
            <div>
              {{ userInfo.shareData ? userInfo.shareData.star.total : 0 }}
            </div>
            <div>获赞总数</div>
          </van-grid-item>
          <van-grid-item
            class="
          readCount"
          >
            <div>
              昨日新增
              <span
                >+{{
                  userInfo.shareData ? userInfo.shareData.comment.yesterday : 0
                }}</span
              >
            </div>
            <div>
              {{ userInfo.shareData ? userInfo.shareData.comment.total : 0 }}
            </div>
            <div>评论总数</div>
          </van-grid-item>
        </van-grid>
      </div>
      <van-divider />
      <!-- 面板连接跳转 -->
      <div class="mainBottom">
        <van-cell
          class="job"
          @click="warn"
          title="我的面经分享 "
          is-link
          :value="shareCount"
          ><template #icon>
            <i class="iconfont iconicon_mine_mianjing"></i>
          </template>
        </van-cell>
        <van-cell
          @click="$router.push('/message')"
          class="job"
          title="我的消息"
          is-link
          :value="userInfo.systemMessages"
          ><template #icon>
            <i class="iconfont iconicon_mine_xiaoxi"></i> </template></van-cell
        ><van-cell
          class="job"
          title="收藏的题库"
          @click="warn"
          is-link
          value="23"
          ><template #icon>
            <i
              class="iconfont iconicon_mine_tikushoucang"
            ></i> </template></van-cell
        ><van-cell
          class="job"
          title="收藏的企业"
          @click="warn"
          is-link
          value="54"
          ><template #icon>
            <i
              class="iconfont iconicon_mine_qiyeshoucang"
            ></i> </template></van-cell
        ><van-cell
          @click="warn"
          class="job"
          title="我的错题"
          is-link
          :value="userInfo.errorNum"
          ><template #icon>
            <i class="iconfont iconicon_mine_cuoti"></i> </template
        ></van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// import { articlesShare } from '@/api/api.js'
import { getLocal } from '@/utils/local.js'
export default {
  mounted () {
    // 获取面经分享
    // this.getShare()
    // // 收藏题目数量
    // this.collectList = this.userInfo.collectQuestions.length
  },
  created () {
    // 判断用户是否登录
    if (!getLocal('heimamm_mobile_token')) {
      this.$router.push('/checklogin')
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  data () {
    return {
      baseURL: process.env.VUE_APP_URL,
      // 分享数据量
      shareCount: 0
      // // 收藏题目
      // collectList: null
    }
  },
  methods: {
    // 提醒信息
    warn () {
      this.$toast('敬请期待!')
    },
    // 编辑用户信息
    editUserinfo () {
      // 判断用户是否登录
      if (getLocal('heimamm_mobile_token')) {
        this.$router.push('/info')
      } else {
        this.$toast('请先登录')
      }
    }
    // 获取面经分享
    // async getShare () {
    //   const res = await articlesShare()
    //   this.shareCount = res.data.total
    // }
  }
}
</script>

<style lang="less" scoped>
.myprofile {
  // 用户信息头部
  .Top {
    position: relative;
    height: 199px;
    background-color: #ce0031;
    .userinfoHead {
      display: flex;
      padding: 0 20px;
      justify-content: space-between;
      align-items: center;
      .infobox {
        color: #fff;
        span {
          display: block;
          margin-top: -20px;
          opacity: 0.7;
          font-size: 14px;
        }
      }
      .userImg img {
        margin-top: 16px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
      }
    }
  }
  // 答题信息区域
  .topicDetail {
    margin-top: 20px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    .item {
      color: #ffffff;
      & span:first-child {
        display: block;
        font-size: 18px;
        font-weight: 700;
      }
      & span:nth-child(2) {
        opacity: 0.7;
        font-size: 12px;
      }
    }
  }
  // 我的岗位区域
  .myJob {
    position: absolute;
    bottom: -15px;
    left: 5%;
    width: 90%;
    .iconicon_mine_gangwei {
      margin-right: 5px;
    }
    .job {
      height: 50px;
      border-radius: 10px;
    }
  }
  // main区域
  .mainbody {
    padding: 10px 20px;
    .mainTop {
      .mainTitle {
        font-size: 18px;
        font-weight: 700;
      }
      .readCount {
        & div:first-child {
          margin-bottom: 8px;
          font-size: 12px;
          color: #c1c1c1;
          span {
            color: #53b5d1;
          }
        }
        & div:nth-child(2) {
          margin-bottom: 8px;
          font-size: 20px;
          font-weight: 700;
        }
        & div:nth-child(3) {
          font-size: 12px;
        }
      }
    }
    .mainBottom {
      .iconfont {
        margin-right: 8px;
      }
    }
  }
  // 间隔线
  .van-divider {
    margin: 10px 0;
  }
}
</style>
